<template>
    <div>
        <el-container>
            <el-header style="background-color: #4a4c5b;" >
                <div style="display:flex;justify-content:flex-end;align-items:center;height:100%;width:99%" >
                    <i class="iconfont icon1 pointer" style="font-size:25px;color:#fff"></i><span style="font-size:20px;color:#fff" class="pointer"> 返回首页</span>
                </div>
            </el-header>
            <el-main id="loginMainBox" style="padding-top: 20px;" class="imgCol">
                <el-card style="width:500px">
                    <el-steps :active="activeStep" align-center>
                        <el-step title="填写基本信息" ></el-step>
                        <el-step title="前往邮箱激活"></el-step>
                        <el-step title="完善机构资料"></el-step>
                    </el-steps>
                    <div class="imgCol" style="margin-top:40px">
                        <div style="width:400px">
                            <el-container>
                                <el-aside width="65px">
                                     <i class="iconfont iconyouxiang" style="font-size:60px;color:#409EFF"></i>
                                </el-aside>
                                <el-main>
                                    <el-row>
                                        <span style="font-size:14px">感谢注册，邮件已发送至您的注册邮箱：{{email}}</span>
                                    </el-row>
                                    <el-row>
                                        <span class="plainWords" style="font-size:14px">请进入邮箱查看邮件，并激活新职通后台管理账号</span>
                                    </el-row>
                                </el-main>
                            </el-container>
                            <el-container style="margin-top:40px">
                                <el-aside width="65px">
                                   
                                </el-aside>
                                <el-main>
                                    <el-row>
                                        <span style="font-size:14px">没有收到邮件？</span>
                                    </el-row>
                                    <el-row>
                                        <span style="font-size:14px">1.请检查邮箱地址是否填写正确，您可以返回 <el-link :underline="false" style="color:#409EFF;margin-left:10px" icon="iconfont iconbianji" @click="goBack">重新填写</el-link></span>
                                    </el-row>
                                    <el-row>
                                        <span style="font-size:14px">2.请检查您的邮件垃圾箱</span>
                                    </el-row>
                                    <el-row>
                                        <span style="font-size:14px">3.您也可以重新尝试<el-link :underline="false" style="color:#409EFF;margin-left:10px" @click="sendAgin"><i class="el-icon-s-promotion"></i>重新发送</el-link></span>
                                    </el-row>
                                   
                                </el-main>
                            </el-container>
                            <el-row style="margin-top:40px">
                                <button  class="btnActive pointer" @click="goToNext"  style="width:400px">我已激活</button>
                            </el-row>
                        </div>
                    </div>
                </el-card>
            </el-main>
            <el-footer style="text-align: center;width: 100%;white-space: nowrap;color: #A7A7A7;font-size: 10px;line-height: 60px;">
				<div>www. xinzhitong. com版权所有新职通一新时期务工人员转 型升级助推者备案号粤ICP备10054973号-5</div>
			</el-footer>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
            activeStep:2,
            email:'',
            code:'',
        }
    },
    watch:{
    },
    mounted(){
        this.email=this.$route.query.email;
        this.code=this.$route.query.code;
        console.log(this.email);
        console.log(this.code);

         var body = document.getElementById('loginMainBox');
			console.log(body)
			var height = document.documentElement.clientHeight - 120
			console.log(height.toString() + 'px')
			if(height<=700)
				height=700
			body.style.height = height.toString() + 'px'
			console.log(body.style.height)
    },
    methods:{
        goToNext(){
          this.login();
        },
        goBack(){
            this.$router.push({
                path:'/registStep1'
            })
         
        },
        sendAgin(){
            var URL=this.IP+'/user/email';
            console.log(URL);
            this.$ajax({
                method:'post',
                url:URL,
                params:{
                    emailType:'REGISTER',
                    targetType:'ORGAN'
                },
                data:{
                    username:this.email,
                    password:this.code
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.$message({
                        message: response.data.data,
                        type: 'success'
                    });
                }else{
                    console.log(response.data.msg);
                    this.$message.error(response.data.msg);
                }
            }).catch(error=>{
                    console.log(error);
                    //Toast(error);
            })
        },
        login(){
            var URL=this.IP+'/user/login';
            console.log(URL);
            this.$ajax({
                method:'post',
                url:URL,
                data:{
                    username:this.email,
                    password:this.code
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.$message({
                        message:'激活成功',
                        type: 'success'
                    });
                    this.$router.push({
                        path:'/registStep3'
                    })
                }else{
                    console.log(response.data.msg);
                     this.$message.error(response.data.msg);
                }
                }).catch(error=>{
                    console.log(error);
                //Toast(error);
                })

        }
    }
}
</script>
<style>
.el-main,.el-header,.el-footer,.el-aside{
    padding: 0px;
}
#loginMainBox{
    background-image: url(../../assets/login/loginbgi.jpg);
    background-size: cover;
}
.imgCol{
    display: flex;
    justify-content: center;
    align-items: center;
}
.plainWords{
    color:rgb(105, 110, 125);
}
.pointer{
    cursor: pointer;
}
.btnActive{
    width: 400px;
    height: 40px;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    border-style: none;
    border-radius: 5px;
}
</style>